<template> 
    <div class="page">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="top">
        <!-- <div class="zuo">
            <img style="height:20px;width: 20px;" src="../cby/photo/返回.png" alt="" @click="back()">
        </div> -->
        <div class="you">
            <span>文章详情</span>
        </div>


    </div>
    <div class="body">
        <div class="hang" v-for="(item,index) in items" :key="index">
            <div class="one">
                <div class="zuo">
                    <img style="height: 35px;width: 35px;border-radius: 50%;" :src="item.photo" alt="">
                </div>
                <div class="you">
                    <div class="y_s">
                        {{item.name}}
                    </div>
                    <div class="y_x">
                        <div class="y_x_z">{{item.time}}前</div>
                    </div>
                </div>
            </div>
            <div class="two">
                {{item.content}}
            </div>
            <div class="three_article">
                    <img src="./photo/1.jpg" alt="">
                    <img src="./photo/1.jpg" alt="">
                </div>
            <div class="four">
                <div class="left">
                    <div class="l_z">
                        <img style="height: 15px;width: 15px;margin-right: 5px;" :src="item.d_z" alt=""
                            @click="dianzan(index)">
                        <span>{{ dianzan_number }}</span>
                    </div>
                </div>
                <!-- <div class="zhong">
                    <div class="l_z">
                        <img style="height: 15px;width: 15px;margin-right: 5px;" src="./photo/评论.png" alt="">
                        <span>评论</span>
                    </div>
                </div> -->
                <div class="right">
                    <div class="l_z">
                        <img style="height: 15px;width: 15px;margin-right: 5px;" :src="item.s_c" alt=""
                            @click="shoucang(index)">
                        <span>{{item.now_shou}}</span>
                    </div>
                </div>
            </div>
            
            <div class="six">
                <div class="six_zuo">
                    <div style="background-size: cover;margin: 3px;">
                        <img style="height: 15px;width: 15px;" src="./photo/评论.png" alt="">
                    </div>
                    <div style="text-align: center;font-size: 5px;color: #a3a3a3;">2</div>
                </div>

                
                <div style="flex: 1;">
                    <!-- 评论循环部分 -->
                    <div class="six_you">
                        <div class="y_zuo">
                            <img style="height: 35px;width: 35px;border-radius: 50%;" :src="item.photo" alt="">
                        </div>
                        <div class="y_you">
                            <div class="y_you_s">
                                <div class="y_you_s_z">{{item.name}}</div>
                                <div class="y_you_s_y">
                                    <span>2小时前</span><br>
                                    
                                </div>
                            </div>
                            <div class="y_you_x">
                                <div class="y_you_x_z">
                                    <!-- <textarea readonly style="resize: none; border: 0;width: 100%; background-color: #f4f4f4;" cols="2" rows="2">asiudghaiuwdhiuhwaiudhiasiudghaiuwdhiuhwaiudhi</textarea> -->
                                    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
                                </div>
                                <div class="y_you_x_y">
                                    <span @click="delete_fn()">删除</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="six_you">
                        <div class="y_zuo">
                            <img style="height: 35px;width: 35px;border-radius: 50%;" :src="item.photo" alt="">
                        </div>
                        <div class="y_you">
                            <div class="y_you_s">
                                <div class="y_you_s_z">{{item.name}}</div>
                                <div class="y_you_s_y">
                                    <span>2小时前</span><br>
                                    
                                </div>
                            </div>
                            <div class="y_you_x">
                                <div class="y_you_x_z">
                                    <!-- <textarea readonly style="resize: none; border: 0;width: 100%; background-color: #f4f4f4;" cols="2" rows="2">asiudghaiuwdhiuhwaiudhiasiudghaiuwdhiuhwaiudhi</textarea> -->
                                    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
                                </div>
                                <div class="y_you_x_y">
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                

            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="yi">
            <img style="height:20px;width: 20px;" src="../cby/photo/返回.png" alt="" @click="back()">
        </div>
        <div class="er">
            <input type="text" placeholder="发表评论..."
                v-model="ping_lun"
                style="border-radius: 5px;background-color: #ffffff;border: 0px;width: 100%;height: 30px;margin-top: 5px;font-size: 15px;padding-left: 10px;" />
        </div>
        <div class="san">
            <img style="height:20px;width: 20px;" src="../cby/photo/发.png" alt="" @click="pinglun_fn">
        </div>
    </div>
    </van-pull-refresh>
</div>
</template>

<script setup lang='ts'>
import { Toast } from "vant";
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive , onMounted} from 'vue'
const router = useRouter()
const route = useRoute()
//下拉刷新
const count = ref(0);
const loading = ref(false);

onMounted(()=>{
console.log(route.query.pro_id);   
})
const onRefresh = () => {
  setTimeout(() => {
    Toast('刷新成功');
    loading.value = false;
  }, 1000);
};

const items = reactive(
[
    {
        name: '花花',
        time: '2小时',
        content: '宝玉宝玉宝玉宝玉',
        photo: new URL(`photo/2.jpg`, import.meta.url).href,
        picture: [
            new URL(`photo/1.jpg`, import.meta.url).href,
            new URL(`photo/2.jpg`, import.meta.url).href,
            new URL(`photo/3.jpg`, import.meta.url).href,
            new URL(`photo/4.jpg`, import.meta.url).href,
            new URL(`photo/1.jpg`, import.meta.url).href,
            new URL(`photo/2.jpg`, import.meta.url).href,
            new URL(`photo/3.jpg`, import.meta.url).href,
        ],
        dian_zan: false,
        d_z: new URL(`photo/点赞前.png`, import.meta.url).href,
        shou_cang: false,
        now_shou: '收藏',
        s_c: new URL(`photo/收藏前.png`, import.meta.url).href
    }
]
)

function back() {
router.push({
    name: 'find'
})
}

const dianzan_number = ref(0)
function dianzan(index: any) {
items[index].dian_zan = !(items[index].dian_zan)
if (items[index].dian_zan == true) {
    items[index].d_z = new URL(`photo/点赞后.png`, import.meta.url).href
    dianzan_number.value = dianzan_number.value + 1
}
else if (items[index].dian_zan == false) {
    items[index].d_z = new URL(`photo/点赞前.png`, import.meta.url).href
    dianzan_number.value = dianzan_number.value - 1
}
}

function shoucang(index: any) {
items[index].shou_cang = !(items[index].shou_cang)
if (items[index].shou_cang == true) {
    items[index].now_shou = "已收藏"
    items[index].s_c = new URL(`photo/收藏后.png`, import.meta.url).href
}
else if (items[index].shou_cang == false) {
    items[index].now_shou = "收藏"
    items[index].s_c = new URL(`photo/收藏前.png`, import.meta.url).href
}
}

//删除自己的评论
function delete_fn(){
console.log(8888888888);

}
//评论、输入框
let ping_lun = ref(null)
function pinglun_fn(){
console.log(ping_lun.value);   
}
</script>

<style scoped>
* {
margin: 0;
padding: 0;
}

.page {
height: 100vh;
width: 100vw;
}

.top {
height: 45px;
text-align: center;
line-height: 45px;
color: #5a5a5a;
display: flex;
}

.zuo {
padding: 4.5px 0px 4.5px 4.5px;
}

.you {
flex: 1;
}

.body {
height: 86vh;
overflow: scroll;
overflow-x: hidden;
}

.hang {
padding: 10px;
display: flex;
flex-direction: column;
background-color: white;
}

.one,
.two,
.three {
margin: 5px 0px 5px 0px;
}
.three_article>img{
    width: 94vw;
    height: 35vh;
}

.three>div {
width: 29vw;
height: 100px;
/* border: 1px solid black; */
display: inline-block;
margin: 0px 3px 3px 3px;
}

img {
width: 29vw;
height: 100px;
display: inline-block;
margin: 0px 3px 3px 3px;
}

.one {
display: flex;
}

.zuo {
height: 35px;
width: 35px;
border-radius: 50%;
}

.you {
display: flex;
flex-direction: column;
margin-left: 10px;
}

.y_s {
flex: 1;
font-size: 15px;
}

.y_x {
flex: 1;
display: flex;
font-size: 10px;
}

.y_x_z {
color: #a4a4a4;
}

.y_x_y {
margin-left: 10px;
color: #a4a4a4;
}

.two {
font-size: 15px;
padding-left: 5px;
}

.four {
padding-top: 5px;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
display: flex;
background-color: #f4f4f4;
padding: 5px 0px 5px 0px;
}

.six {
background-color: #f4f4f4;
display: flex;
border-top: 1px solid #ececec;
}

/* .six_zuo{
border: 1px solid black;
} */

.six_you {
flex: 1;
display: flex;
margin: 5px 5px 0px 5px;
border-bottom: 1px solid #ececec;
}

/* .y_zuo{
border: 1px solid black;
} */
.y_you {
flex: 1;
}

.y_you_s {
display: flex;
}

.y_you_s_z {
flex: 1;
font-size: 15px;
}

.y_you_s_y {
font-size: 10px;
color: #bfbfbf;
padding-right: 5px;
}

.y_you_x {
display: flex;
}

.y_you_x_z {
flex: 1;
font-size: 15px;
color: #7c7c7c;
margin-right: 5px;
}
.y_you_x_z >span{
width: 100px;
word-break: break-all;
overflow: auto;
white-space: normal;
}
.y_you_x_y {
font-size: 15px;
color: #7b4643;
padding-right: 5px;
width: 30px;
}

.left {
flex: 1
}

.l_z {
text-align: center;
color: #787878;
font-size: 15px;
}

.zhong {
flex: 1
}

.right {
flex: 1
}

.bottom {
height: 45px;
background-color: #efefef;
display: flex;
}

.yi,
.san {
flex: 1;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 45px;
}

.er {
flex: 7;
margin-right: 10px;
}
</style>